<template>
  <el-dialog 
    title='新增'
    :visible.sync="visible"
    @close='handleClose'
    @open='handleOpen'
    top='10vh'
    >
    <div class="form-wrap">
      <el-form ref='detailManageForm' :model='form' :rules="rules" label-position='left' label-width="100px">

        <el-form-item label='假种名称' prop='typeSelect'>

          <el-select v-show='!isCustom' v-model='form.typeSelect'>

            <el-option 
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value" />

          </el-select>

          <el-input v-show='isCustom' v-model='form.typeInput' style='width:217px' />

          <el-checkbox 
            style="margin-left:5px"
            v-model='isCustom'>
            自定义假期类型
           </el-checkbox>

        </el-form-item>

        <el-form-item label='请假日期类型'>
          <el-radio v-model="form.dayType" :label="1">工作日</el-radio>    
          <el-radio v-model="form.dayType" :label="2">自然日</el-radio>    
        </el-form-item>

        <el-form-item label='关联配置ID' prop='confId' v-if='type==="add"'>
          <el-select v-model='form.confId'>

            <el-option 
              v-for="(item,i) in confIdList"
              :key="i"
              :label='item.name'
              :value="item.id" />

          </el-select>
        </el-form-item>

        


        <el-form-item label='是否启用余额'>
          <el-select v-model='form.isUsed'>
            <el-option label='是' :value='1'></el-option>
            <el-option label='否' :value='0'></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label='排序' prop='sort'>
          <el-input style='width:217px' v-model.trim='form.sort'/>
        </el-form-item>

        

        <el-form-item label='假种描述'>
          <el-input type="textarea" style="width:80%" v-model.trim='form.describe' />

        </el-form-item>
      </el-form>
    </div>

    <span slot="footer">
      <el-button type='primary' @click.stop="handleSure('detailManageForm')">保 存</el-button>
    </span>

  </el-dialog>
</template>

<script>
import Vue from 'vue'
import { Message, Checkbox, Radio } from 'element-ui'
Vue.use(Radio)
Vue.use(Checkbox)
import Bus from './bus'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editProp: {
      type: Object,
      default: function () {
        return {}
      }
    },
    confIdList: {
      type: Array,
      default: function () {
        return []
      }
    },
    id: {
      type: String,
      default: ''
    }
  },
  data () {

    const rule_typeSelect = (rule, value, callback) => {
      if (!value && !this.form.typeInput) {
        return callback(new Error('请选择或填写假种类型'))
      }

      callback()
    }

    const rule_typeSort = (rule, value, callback) => {

      if (value == '') {
        return callback(new Error('请填写排序'))
      }

      if (parseInt(value) < 0 || isNaN(parseInt(value))) {
        return callback(new Error('请输入大于0的纯数字'))
      }

      callback()
    }

    return {
      visible: false,
      form: {
        typeSelect: '',
        isUsed: 0,
        sort: '',
        describe: '',
        typeInput: '',
        dayType: 1,
        confId: ''
      },
      isCustom: false,
      rules: {
        typeSelect: [
          {
            required: true, validator: rule_typeSelect, trigger: 'submit'
          }
        ],
        sort: [
          {
            required: true, validator: rule_typeSort, trigger: 'submit'
          }
        ],
        confId: [
          {
            required: true, message: '请选择关联配置ID', trigger: 'submit'
          }
        ]
      },
      typeList: [
        {
          value: '',
          label: '请选择'
        }, {
          value: '春节',
          label: '春节'
        }, {
          value: '国庆节',
          label: '国庆节'
        }, {
          value: '清明节',
          label: '清明节'
        }, {
          value: '端午节',
          label: '端午节'
        }, {
          value: '中秋节',
          label: '中秋节'
        }, {
          value: '元旦节',
          label: '元旦节'
        }, {
          value: '劳动节',
          label: '劳动节'
        }, {
          value: '周末',
          label: '周末'
        }],

    }
  },
  computed: {
    type () {
      return Object.keys(this.editProp).length ? 'edit' : 'add'
    }
  },

  watch: {
    dialogVisible (newValue) {
      this.visible = newValue
    },
    isCustom (newValue) {
      newValue === true && (this.form.typeSelect = '')
      newValue === false && (this.form.typeInput = '')
    }
  },

  methods: {

    handleOpen () {
      if (this.type === 'edit') {
        this.isCustom = true
        this.form.typeInput = this.editProp.name
        this.form.isUsed = this.editProp.isEnable
        this.form.sort = this.editProp.sort
        this.form.describe = this.editProp.content
        this.form.dayType = this.editProp.dayType

      }

      if (this.type === 'add') {
        this.form.dayType = 1
        this.form.confId = ''
        this.form.isUsed = 0
        this.form.sort = ''
        this.form.describe = ''
        this.form.typeInput = ''
        this.form.typeSelect = ''
      }
    },

    handleClose () {
      this.isCustom = false
      for (const key in this.form) {
        let val = this.form[key]
        if (typeof val === 'string') {
          val = ''
        } else if (typeof val === 'boolean') {
          val = false
        }
      }
      this.$emit("update:dialogVisible", false)

    },

    handleSure (formName) {

      this.$refs[formName].validate((valid) => {
        if (valid) {

          const name = this.isCustom ? this.form.typeInput : this.form.typeSelect

          const editSave = () => {

            const params = {
              name,
              confId: this.editProp.confId,
              content: this.form.describe,
              createId: this.editProp.createId,
              createName: this.editProp.createName,
              dayType: this.form.dayType,
              id: this.editProp.id,
              isEnable: this.form.isUsed - 0,
              sort: this.form.sort,
              vacationId: this.editProp.vacationId,
              createDate: this.editProp.createDate
            }
            this.Axios
              .Post('/wfConfLeaveTypeInfo/updateLeaveTypeInfo', params)
              .then(res => {

                if (res.data.status == 1) {

                  Message({
                    type: 'success',
                    message: res.data.message
                  })

                  Bus.$emit('refresh', Math.random())

                }

                this.handleClose()
              })
          }



          const addSave = () => {

            const params = {
              confId: this.form.confId,
              content: this.form.describe,
              dayType: this.form.dayType,
              isEnable: this.form.isUsed - 0,
              name,
              sort: this.form.sort,
              vacationId: this.$route.query.id
            }
            this.Axios
              .Post('/wfConfLeaveTypeInfo/addLeaveTypeInfo', params)
              .then(res => {

                if (res.data.status == 1) {

                  Message({
                    type: 'success',
                    message: res.data.message
                  })

                  Bus.$emit('refresh', Math.random())

                }

                this.handleClose()
              })
          }

          this.type === 'edit' ? editSave() : addSave()

        } else {

          return false
        }
      })
    },

  },
}
</script>

<style lang='less'>
.form-wrap {
  padding: 20px 0 0 40px;
}
</style>